<script setup lang='ts'>
import { useMyStrategy } from "./hook/MyStrategy";
import { PureTableBar } from "@/components/RePureTableBar";
import Strategy from "./components/Strategy.vue"
const {
  Tactics,
  loading,
  dataList,
  columns,
  chosedom,
  btnloading,
  pagination,
  NewTactics,
  SetStrayegy,
  DialogVisible,
  CloseVisible,
  newchose,
  TransferTip,
  handleSizeChange,
  handleCurrentChange

} = useMyStrategy()
</script>

<template>
  <div class="main">
    <PureTableBar class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="DialogVisible = true"> 新建策略 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          max-height="700" :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type="primary" text size="small" @click="TransferTip(row, 0)" :loading="btnloading"
              :disabled="row.states == '已提交'"> 提交
            </el-button>
            <el-button type="primary" text size="small" @click="TransferTip(row, 1)"> 查看/编辑 </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <!-- 新建策略 -->
    <div class="NewTactics" v-show="chosedom">
      <Strategy :SeleteType="NewTactics" ref="SetStrayegy" />
    </div>
  </div>
  <ReDialog :width="400" :height="220" :models="DialogVisible" @Closes="CloseVisible()">
    <template #header>
      <h2 style="text-align: center;">新建策略</h2>
    </template>
    <template #main>
      <div class="h-full flex justify-center items-center">
        <el-form-item label="投资类型" label-width="100px" prop="type">
          <el-select v-model="NewTactics">
            <el-option v-for=" it in Tactics" :key="it.value" :label="it.label" :value="it.value" />
          </el-select>
        </el-form-item>
      </div>
    </template>
    <template #footer>
      <el-button type="primary" @click="newchose()"> 确定 </el-button>
      <el-button @click="CloseVisible()"> 取消 </el-button>
    </template>
  </ReDialog>
</template>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

.main {
  position: relative;
  //height: 100%;

  .NewTactics {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #efefef;
    width: 100%;
    height: 100%;
    z-index: 10;
    // display: none;
  }
}

.dialog-footer {
  margin: 0 auto;
  display: block;
  text-align: center;
}
</style>
